import React from "react";
import type { Meta, StoryObj, StoryFn } from "@storybook/react";
import { fn } from "@storybook/test";
import { action } from "@storybook/addon-actions";
import AutoComplete, { DataSourceType } from "./autoComplete.tsx";

interface LakerPlayerProps {
    value: string;
    number: number;
}

const SimpleComplete = () => {
    const lakersWithNumber = [
        { value: "bradley", number: 11 },
        { value: "pope", number: 1 },
        { value: "caruso", number: 4 },
        { value: "cook", number: 2 },
        { value: "cousins", number: 15 },
        { value: "james", number: 23 },
        { value: "AD", number: 3 },
        { value: "green", number: 14 },
        { value: "howard", number: 39 },
        { value: "kuzma", number: 0 },
    ];
    // const handleFetch = (query: string) => {
    //     return lakersWithNumber.filter(item => item.value.includes(query));
    // }
    const handleFetch = (query: string) => {
        return fetch(`https://api.github.com/search/users?q=${query}`)
            .then((res) => res.json())
            .then(({ items }) => {
                console.log("搜索到内容",items);
                
                return items.map((item: any) => ({ value: item.login, ...item }))
            });
    };
    const renderOption = (item: DataSourceType<LakerPlayerProps>) => {
        return (
            <>
                <h6>Name:{item.value}</h6>
                <p>Number:{item.number}</p>
            </>
        );
    }
    return <AutoComplete fetchSuggestions={handleFetch} onSelect={action('selected')} renderOption={renderOption} />
}

// 默认导出
export default {
    title: 'AutoComplete', // 设置故事的标题
    component: AutoComplete, // 指定组件
    args: { onSelect: fn() },
    tags: ['autodocs'],
} as Meta;

const primaryTemplate: StoryFn = (args) => <SimpleComplete {...args} />;
export const WithPrimary = primaryTemplate.bind({});
WithPrimary.args = {
    children: 'Click me'
};